---
sidebar_position: 5
---

# Styles

Properties related to messages.

### `style` | `chatStyle` {#style}

- Type: [`CustomStyle`](#CustomStyle)

Styling for the chat's container element. <br />
It can either be defined via the [`style` attribute](https://www.w3schools.com/tags/att_style.asp)
or a `chatStyle` property that accepts an object. Both of these have the SAME outcome
and are to be chosen by developer preference or framework compatibility.<br />

import ComponentContainer from '@site/src/components/table/componentContainer';
import DeepChatBrowser from '@site/src/components/table/deepChatBrowser';
import LineBreak from '@site/src/components/markdown/lineBreak';
import BrowserOnly from '@docusaurus/BrowserOnly';
import TabItem from '@theme/TabItem';
import Tabs from '@theme/Tabs';

<BrowserOnly>{() => require('@site/src/components/nav/autoNavToggle').readdAutoNavShadowToggle()}</BrowserOnly>

#### Example

<ComponentContainer>
  <DeepChatBrowser style={{backgroundColor: '#f7f7f7', borderRadius: '8px'}} demo={true}></DeepChatBrowser>
</ComponentContainer>

<Tabs>
<TabItem value="js" label="Sample code">

```html
<deep-chat style="background-color: #f7f7f7; border-radius: 8px"></deep-chat>

<deep-chat chatStyle='{"backgroundColor": "#f7f7f7", "borderRadius": "8px"}'></deep-chat>
```

</TabItem>
<TabItem value="py" label="Full code">

```html
<!-- This example is for Vanilla JS and should be tailored to your framework (see Examples) -->

<deep-chat style="background-color: #f7f7f7; border-radius: 8px" demo="true"></deep-chat>

<deep-chat chatStyle='{"backgroundColor": "#f7f7f7", "borderRadius": "8px"}' demo="true"></deep-chat>
```

</TabItem>
</Tabs>

<LineBreak></LineBreak>

### `attachmentContainerStyle` {#attachmentContainerStyle}

- Type: [`CustomStyle`](#CustomStyle)

Object containing CSS styling properties for the element containing files attachments ready to be sent with the message. <br />

#### Example

<ComponentContainer>
  <DeepChatBrowser
    attachmentContainerStyle={{backgroundColor: '#b2e1ff57'}}
    demo={{displayFileAttachmentContainer: true}}
    style={{borderRadius: '8px'}}
  ></DeepChatBrowser>
</ComponentContainer>

<Tabs>
<TabItem value="js" label="Sample code">

```html
<deep-chat attachmentContainerStyle='{"backgroundColor": "#b2e1ff57"}'></deep-chat>
```

</TabItem>
<TabItem value="py" label="Full code">

```html
<!-- This example is for Vanilla JS and should be tailored to your framework (see Examples) -->

<deep-chat
  attachmentContainerStyle='{"backgroundColor": "#b2e1ff57"}'
  demo='{"displayFileAttachmentContainer": true}'
  style="border-radius: 8px"
></deep-chat>
```

</TabItem>
</Tabs>

<LineBreak></LineBreak>

### `dropupStyles` {#dropupStyles}

- Type: \{<br />
  &nbsp;&nbsp;&nbsp;&nbsp; [`button?: Button`](#Button), <br />
  &nbsp;&nbsp;&nbsp;&nbsp; `menu?:` \{ <br />
  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; [`container?: CustomStyle`](#CustomStyle), <br />
  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; [`item?: StatefulStyles`](#StatefulStyles), <br />
  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; [`iconContainer?: CustomStyle`](#CustomStyle), <br />
  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; [`text?: CustomStyle`](#CustomStyle) <br />
  \}\}

Configuration for the dropup button and its menu element styles. <br />

#### Example

<ComponentContainer>
  <DeepChatBrowser
    style={{borderRadius: '8px'}}
    introMessage={{text: 'Open the dropup by clicking the + button on bottom left of the input.'}}
    dropupStyles={{
      button: {
        styles: {
          container: {
            default: {backgroundColor: '#eff8ff'},
            hover: {backgroundColor: '#e4f3ff'},
            click: {backgroundColor: '#d7edff'},
          },
        },
      },
      menu: {
        container: {
          boxShadow: '#e2e2e2 0px 1px 3px 2px',
        },
        item: {
          hover: {
            backgroundColor: '#e1f2ff',
          },
          click: {
            backgroundColor: '#cfeaff',
          },
        },
        iconContainer: {
          width: '1.8em',
        },
        text: {
          fontSize: '1.05em',
        },
      },
    }}
    demo={true}
    audio={{button: {position: 'dropup-menu'}}}
    images={{button: {position: 'dropup-menu'}}}
  ></DeepChatBrowser>
</ComponentContainer>

<Tabs>
<TabItem value="js" label="Sample code">

```html
<deep-chat
  dropupStyles='{
    "button": {
      "styles": {
        "container": {
          "default": {"backgroundColor": "#eff8ff"},
          "hover": {"backgroundColor": "#e4f3ff"},
          "click": {"backgroundColor": "#d7edff"}
        }
      }
    },
    "menu": {
      "container": {
        "boxShadow": "#e2e2e2 0px 1px 3px 2px"
      },
      "item": {
        "hover": {
          "backgroundColor": "#e1f2ff"
        },
        "click": {
          "backgroundColor": "#cfeaff"
        }
      },
      "iconContainer": {
        "width": "1.8em"
      },
      "text": {
        "fontSize": "1.05em"
      }
    }
  }'
></deep-chat>
```

</TabItem>
<TabItem value="py" label="Full code">

```html
<!-- This example is for Vanilla JS and should be tailored to your framework (see Examples) -->

<deep-chat
  dropupStyles='{
    "button": {
      "styles": {
        "container": {
          "default": {"backgroundColor": "#eff8ff"},
          "hover": {"backgroundColor": "#e4f3ff"},
          "click": {"backgroundColor": "#d7edff"}
        }
      }
    },
    "menu": {
      "container": {
        "boxShadow": "#e2e2e2 0px 1px 3px 2px"
      },
      "item": {
        "hover": {
          "backgroundColor": "#e1f2ff"
        },
        "click": {
          "backgroundColor": "#cfeaff"
        }
      },
      "iconContainer": {
        "width": "1.8em"
      },
      "text": {
        "fontSize": "1.05em"
      }
    }
  }'
  demo="true"
  style="border-radius: 8px"
  audio='{"button": {"position": "dropup-menu"}}'
  images='{"button": {"position": "dropup-menu"}}'
  introMessage='{"text": "Open the dropup by clicking the + button on bottom left of the input."}'
></deep-chat>
```

</TabItem>
</Tabs>

<LineBreak></LineBreak>

### `inputAreaStyle` {#inputAreaStyle}

- Type: [`CustomStyle`](#CustomStyle)

Styling for the chat view's bottom area dedicated for text input and file buttons. <br />

#### Example

<ComponentContainer>
  <DeepChatBrowser
    style={{borderRadius: '8px'}}
    inputAreaStyle={{backgroundColor: '#ebf5ff'}}
    demo={true}
  ></DeepChatBrowser>
</ComponentContainer>

<Tabs>
<TabItem value="js" label="Sample code">

```html
<deep-chat inputAreaStyle='{"backgroundColor": "#ebf5ff"}'></deep-chat>
```

</TabItem>
<TabItem value="py" label="Full code">

```html
<!-- This example is for Vanilla JS and should be tailored to your framework (see Examples) -->

<deep-chat inputAreaStyle='{"backgroundColor": "#ebf5ff"}' style="border-radius: 8px" demo="true"></deep-chat>
```

</TabItem>
</Tabs>

<LineBreak></LineBreak>

### `textInput` {#textInput}

- Type: \{<br />
  &nbsp;&nbsp;&nbsp;&nbsp; `styles?:` \{[`text?: CustomStyle`](#CustomStyle), [`container?: CustomStyle`](#CustomStyle), [`focus?: CustomStyle`](#CustomStyle)\}, <br />
  &nbsp;&nbsp;&nbsp;&nbsp; `placeholder?:` \{`text?: string`, [`style?: CustomStyle`](#CustomStyle)\}, <br />
  &nbsp;&nbsp;&nbsp;&nbsp; `characterLimit?: number`, <br />
  &nbsp;&nbsp;&nbsp;&nbsp; `disabled?: boolean` <br />
  \}

Custom details for the chat's text input. <br />
`styles` object defines the styling for the `text` element and its box `container`. The `focus` property is used to set the container style when it is focused. <br />
`placeholder` object's `text` property is the initial text that is displayed on the input before the user makes any actions and
`style` can be used to customize it. Use [`setPlaceholderText`](/docs/methods#setPlaceholderText) to change it dynamically. <br />
`characterLimit` is the maximum number of charactes that can be inserted into the text input. <br />
`disabled` is used to prevent the user from inserting text. This also comes with its own custom styling. <br />

#### Generic example

<ComponentContainer>
  <DeepChatBrowser
    style={{borderRadius: '8px'}}
    textInput={{
      styles: {
        text: {color: 'black'},
        container: {maxHeight: '50px', backgroundColor: '#f5f9ff'},
        focus: {border: '2px solid #a2a2ff'},
      },
      placeholder: {text: 'Insert text here...', style: {color: '#4459a4'}},
      characterLimit: 10,
    }}
    demo={true}
  ></DeepChatBrowser>
</ComponentContainer>

<Tabs>
<TabItem value="js" label="Sample code">

```html
<deep-chat
  textInput='{
    "styles": {
      "text": {"color": "black"},
      "container": {"maxHeight": "50px", "backgroundColor": "#f5f9ff"},
      "focus": {"border": "2px solid #a2a2ff"}
    },
    "placeholder": {"text": "Insert text here...", "style": {"color": "#4459a4"}},
    "characterLimit": 10
  }'
></deep-chat>
```

</TabItem>
<TabItem value="py" label="Full code">

```html
<!-- This example is for Vanilla JS and should be tailored to your framework (see Examples) -->

<deep-chat
  textInput='{
    "styles": {
      "text": {"color": "black"},
      "container": {"maxHeight": "50px", "backgroundColor": "#f5f9ff"},
      "focus": {"border": "2px solid #a2a2ff"}
    },
    "placeholder": {"text": "Insert text here...", "style": {"color": "#4459a4"}},
    "characterLimit": 10
  }'
  style="border-radius: 8px"
  demo="true"
></deep-chat>
```

</TabItem>
</Tabs>

<LineBreak></LineBreak>

#### Disabled example

<ComponentContainer>
  <DeepChatBrowser
    style={{borderRadius: '8px'}}
    textInput={{disabled: true, placeholder: {text: 'Text not allowed...'}}}
    demo={true}
  ></DeepChatBrowser>
</ComponentContainer>

<Tabs>
<TabItem value="js" label="Sample code">

```html
<deep-chat
  textInput='{
    "disabled": true,
    "placeholder": {
      "text": "Text not allowed..."
  }}'
></deep-chat>
```

</TabItem>
<TabItem value="py" label="Full code">

```html
<!-- This example is for Vanilla JS and should be tailored to your framework (see Examples) -->

<deep-chat
  textInput='{
    "disabled": true,
    "placeholder": {
      "text": "Text not allowed..."
  }}'
  style="border-radius: 8px"
  demo="true"
></deep-chat>
```

</TabItem>
</Tabs>

<LineBreak></LineBreak>

### `submitButtonStyles` {#submitButtonStyles}

- Type: \{<br />
  &nbsp;&nbsp;&nbsp;&nbsp; [`submit?: ButtonStyles`](#ButtonStyles), <br />
  &nbsp;&nbsp;&nbsp;&nbsp; [`loading?: ButtonStyles`](#ButtonStyles), <br />
  &nbsp;&nbsp;&nbsp;&nbsp; [`stop?: ButtonStyles`](#ButtonStyles), <br />
  &nbsp;&nbsp;&nbsp;&nbsp; [`disabled?: ButtonStyles`](#ButtonStyles), <br />
  &nbsp;&nbsp;&nbsp;&nbsp; `alwaysEnabled?: boolean`, <br />
  &nbsp;&nbsp;&nbsp;&nbsp; [`position?: ButtonPosition`](#ButtonPosition) <br />
  \}

Custom styling for the submit button. <br />
`submit` state is displayed when the user's input is valid and can be sent. <br />
`loading` is used when waiting for a message response from the target server. <br />
`stop` is used when a message response is being [`streamed`](/docs/connect#Stream). <br />
`disabled` is used when the user's input cannot be sent (see [`validateInput`](/docs/interceptors#validateInput)) or the [websocket](/docs/connect#Websocket) connection is not live.
You can also set this state manually by calling the [`disableSubmitButton`](/docs/methods#disableSubmitButton) method. <br />
`alwaysEnabled` prevents the `disabled` button state from being used. <br />
`position` sets the button position within the input area. <br />

<LineBreak></LineBreak>

:::info
The `loading`, `stop` and `disabled` styles will automatically inherit your `submit` style `default` state values.
:::

:::info
When [displayLoadingBubble](/docs/messages/#displayLoadingBubble) is set to _false_ and the `loading` property's `content` string for `text` or `svg` is not set,
the submit button will have a loading animation.
:::

<LineBreak></LineBreak>

#### SVG Example

<ComponentContainer>
  <DeepChatBrowser
    style={{borderRadius: '8px'}}
    submitButtonStyles={{
      alwaysEnabled: true,
      submit: {
        container: {
          default: {
            backgroundColor: '#e3f0ff',
          },
          hover: {backgroundColor: '#c6e1ff'},
          click: {backgroundColor: '#acd3ff'},
        },
        svg: {
          styles: {
            default: {
              filter:
                'brightness(0) saturate(100%) invert(58%) sepia(53%) saturate(6828%) hue-rotate(214deg) brightness(100%) contrast(100%)',
            },
          },
        },
      },
      position: 'outside-right',
    }}
    demo={true}
  ></DeepChatBrowser>
</ComponentContainer>

<Tabs>
<TabItem value="js" label="Sample code">

```html
<deep-chat
  submitButtonStyles='{
    "submit": {
      "container": {
        "default": {"backgroundColor": "#e3f0ff"},
        "hover": {"backgroundColor": "#c6e1ff"},
        "click": {"backgroundColor": "#acd3ff"}
      },
      "svg": {
        "styles": {
          "default": {
            "filter":
              "brightness(0) saturate(100%) invert(58%) sepia(53%) saturate(6828%) hue-rotate(214deg) brightness(100%) contrast(100%)"
          }
        }
      }
    },
    "alwaysEnabled": true,
    "position": "outside-right"
  }'
></deep-chat>
```

</TabItem>
<TabItem value="py" label="Full code">

```html
<!-- This example is for Vanilla JS and should be tailored to your framework (see Examples) -->

<deep-chat
  submitButtonStyles='{
    "submit": {
      "container": {
        "default": {"backgroundColor": "#e3f0ff"},
        "hover": {"backgroundColor": "#c6e1ff"},
        "click": {"backgroundColor": "#acd3ff"}
      },
      "svg": {
        "styles": {
          "default": {
            "filter":
              "brightness(0) saturate(100%) invert(58%) sepia(53%) saturate(6828%) hue-rotate(214deg) brightness(100%) contrast(100%)"
          }
        }
      }
    },
    "alwaysEnabled": true,
    "position": "outside-right"
  }'
  style="border-radius: 8px"
  demo="true"
></deep-chat>
```

</TabItem>
</Tabs>

<LineBreak></LineBreak>

#### Text Example

It is important to note that the `submit` state's `default` properties are automatically copied into the other states,
however `hover` and `submit` need to be defined.

<ComponentContainer>
  <DeepChatBrowser
    style={{borderRadius: '8px'}}
    textInput={{styles: {text: {paddingRight: '70px'}}}}
    submitButtonStyles={{
      alwaysEnabled: true,
      submit: {
        container: {
          default: {backgroundColor: '#e3f0ff', width: '60px'},
          hover: {backgroundColor: '#c6e1ff'},
          click: {backgroundColor: '#acd3ff'},
        },
        text: {
          content: 'Submit',
          styles: {default: {color: '#6c6c6c'}, hover: {color: '#2c2c2c'}},
        },
      },
      loading: {
        text: {
          content: 'Loading',
        },
      },
      stop: {
        container: {
          hover: {backgroundColor: '#c6e1ff'},
          click: {backgroundColor: '#acd3ff'},
        },
        text: {
          content: 'Stop',
        },
      },
    }}
    connect={{stream: true}}
    demo={true}
  ></DeepChatBrowser>
</ComponentContainer>

<Tabs>
<TabItem value="js" label="Sample code">

```html
<deep-chat
  submitButtonStyles='{
    "submit": {
      "container": {
        "default": {"backgroundColor": "#e3f0ff", "width": "60px"},
        "hover": {"backgroundColor": "#c6e1ff"},
        "click": {"backgroundColor": "#acd3ff"}
      },
      "text": {
        "content": "Submit",
        "styles": {"default": {"color": "#6c6c6c"}, "hover": {"color": "#2c2c2c"}}
      }
    },
    "loading": {"text": {"content": "Loading"}},
    "stop": {
      "container": {
        "hover": {"backgroundColor": "#c6e1ff"},
        "click": {"backgroundColor": "#acd3ff"}
      },
      "text": {"content": "Stop"}
    },
    "alwaysEnabled": true
  }'
></deep-chat>
```

</TabItem>
<TabItem value="py" label="Full code">

```html
<!-- This example is for Vanilla JS and should be tailored to your framework (see Examples) -->

<deep-chat
  textInput='{"styles": {"text": {"paddingRight": "70px"}}}'
  submitButtonStyles='{
    "submit": {
      "container": {
        "default": {"backgroundColor": "#e3f0ff", "width": "60px"},
        "hover": {"backgroundColor": "#c6e1ff"},
        "click": {"backgroundColor": "#acd3ff"}
      },
      "text": {
        "content": "Submit",
        "styles": {"default": {"color": "#6c6c6c"}, "hover": {"color": "#2c2c2c"}}
      }
    },
    "loading": {"text": {"content": "Loading"}},
    "stop": {
      "container": {
        "hover": {"backgroundColor": "#c6e1ff"},
        "click": {"backgroundColor": "#acd3ff"}
      },
      "text": {"content": "Stop"}
    },
    "alwaysEnabled": true
  }'
  style="border-radius: 8px"
  connect='{"stream": true}'
  demo="true"
></deep-chat>
```

</TabItem>
</Tabs>

<LineBreak></LineBreak>

#### Disabled example

<ComponentContainer>
  <DeepChatBrowser
    style={{borderRadius: '8px'}}
    submitButtonStyles={{
      disabled: {
        container: {default: {cursor: 'auto'}},
        svg: {
          content: `<?xml version="1.0" encoding="utf-8"?> <svg viewBox="0 0 25 25" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" d="M5.781 4.414a7 7 0 019.62 10.039l-9.62-10.04zm-1.408 1.42a7 7 0 009.549 9.964L4.373 5.836zM10 1a9 9 0 100 18 9 9 0 000-18z"/> </svg>`,
          styles: {
            default: {paddingTop: '2.4px', paddingleft: '2px'},
          },
        },
      },
    }}
    demo={true}
  ></DeepChatBrowser>
</ComponentContainer>

<Tabs>
<TabItem value="js" label="Sample code">

```html
<deep-chat
  submitButtonStyles='{
    "disabled": {
      "container": {"default": {"cursor": "auto"}},
      "svg": {
        "content": "<?xml version=\"1.0\" encoding=\"utf-8\"?> <svg viewBox=\"0 0 25 25\" xmlns=\"http://www.w3.org/2000/svg\"> <path fill-rule=\"evenodd\" d=\"M5.781 4.414a7 7 0 019.62 10.039l-9.62-10.04zm-1.408 1.42a7 7 0 009.549 9.964L4.373 5.836zM10 1a9 9 0 100 18 9 9 0 000-18z\"/> </svg>",
        "styles": {"default": {"paddingTop": "2.4px", "paddingLeft": "2px"}}
      }
    }
  }'
></deep-chat>
```

</TabItem>
<TabItem value="py" label="Full code">

```html
<!-- This example is for Vanilla JS and should be tailored to your framework (see Examples) -->

<deep-chat
  submitButtonStyles='{
    "disabled": {
      "container": {"default": {"cursor": "auto"}},
      "svg": {
        "content": "<?xml version=\"1.0\" encoding=\"utf-8\"?> <svg viewBox=\"0 0 25 25\" xmlns=\"http://www.w3.org/2000/svg\"> <path fill-rule=\"evenodd\" d=\"M5.781 4.414a7 7 0 019.62 10.039l-9.62-10.04zm-1.408 1.42a7 7 0 009.549 9.964L4.373 5.836zM10 1a9 9 0 100 18 9 9 0 000-18z\"/> </svg>",
        "styles": {"default": {"paddingTop": "2.4px", "paddingLeft": "2px"}}
      }
    }
  }'
  style="border-radius: 8px"
  demo="true"
></deep-chat>
```

</TabItem>
</Tabs>

<LineBreak></LineBreak>

### `auxiliaryStyle` {#auxiliaryStyle}

- Type: `string`

This string is primarily used to configure [`Webkit CSS`](https://developer.mozilla.org/en-US/docs/Web/CSS/WebKit_Extensions) which cannot be added through component's style properties. A great
example of this is the [`::-webkit-scrollbar`](https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-scrollbar) pseudo element which affects the style of the component's scrollbar.

#### Example

<ComponentContainer>
  <DeepChatBrowser
    style={{borderRadius: '8px'}}
    demo={true}
    history={[
      {text: 'Hey, how are you?', role: 'user'},
      {text: 'I am doing great, how about you?', role: 'ai'},
      {text: 'What is the meaning of life?', role: 'user'},
      {
        text: 'This ultimately depends on the person, but it could be the pursuit of happiness or fulfillment.',
        role: 'ai',
      },
      {text: 'I just feel like sleeping all day...', role: 'user'},
      {text: 'As long as it makes you happy!', role: 'ai'},
    ]}
    auxiliaryStyle="
      ::-webkit-scrollbar {
        width: 10px;
        height: 10px;
      }
      ::-webkit-scrollbar-thumb {
        background-color: #54a7ff;
        border-radius: 5px;
      }"
  ></DeepChatBrowser>
</ComponentContainer>

<Tabs>
<TabItem value="js" label="Sample code">

```html
<deep-chat
  auxiliaryStyle="
    ::-webkit-scrollbar {
      width: 10px;
      height: 10px;
    }
    ::-webkit-scrollbar-thumb {
      background-color: #54a7ff;
      border-radius: 5px;
    }"
></deep-chat>
```

</TabItem>
<TabItem value="py" label="Full code">

```html
<!-- This example is for Vanilla JS and should be tailored to your framework (see Examples) -->

<deep-chat
  auxiliaryStyle="
    ::-webkit-scrollbar {
      width: 10px;
      height: 10px;
    }
    ::-webkit-scrollbar-thumb {
      background-color: #54a7ff;
      border-radius: 5px;
    }"
  history='[
    {"text": "Hey, how are you?", "role": "user"},
    {"text": "I am doing great, how about you?", "role": "ai"},
    {"text": "What is the meaning of life?", "role": "user"},
    {
      "text": "This ultimately depends on the person, but it could be the pursuit of happiness or fulfillment.",
      "role": "ai"
    },
    {"text": "I just feel like sleeping all day...", "role": "user"},
    {"text": "As long as it makes you happy!", "role": "ai"}
  ]'
  style="border-radius: 8px"
  demo="true"
></deep-chat>
```

</TabItem>
</Tabs>

:::danger
[`Webkit CSS`](https://developer.mozilla.org/en-US/docs/Web/CSS/WebKit_Extensions) is not standardised across all browsers, make sure to check the [`browser support`](https://caniuse.com/)
for the property you are using.
:::

<LineBreak></LineBreak>

## Types

Types shared by styles properties:

### `CustomStyle` {#CustomStyle}

- Type: [`CSSStyleDeclaration`](https://webplatform.github.io/docs/css/cssom/CSSStyleDeclaration/CSSStyleDeclaration/)

Object containing properties defined in the CSSStyleDeclaration [`specification`](https://webplatform.github.io/docs/css/cssom/CSSStyleDeclaration/CSSStyleDeclaration/)
as optionals. A TypeScript example can be found in this [link](https://github.com/microsoft/TypeScript-DOM-lib-generator/blob/bf671e99615b06404db7a89fa9ae05bf14a8e47c/baselines/dom.generated.d.ts#L2737).

<LineBreak></LineBreak>

### `StatefulStyles` {#StatefulStyles}

- Type: \{[`default?: CustomStyle`](#CustomStyle), [`hover?: CustomStyle`](#CustomStyle), [`click?: CustomStyle`](#CustomStyle)\}

Object defining styling properties for different mouse states on the element.

<LineBreak></LineBreak>

### `Button` {#Button}

- Type: \{[`styles?: ButtonStyles`](#ButtonStyles), [`position?: ButtonPosition`](#ButtonPosition)\}

Styling for a button inside the chat view. <br />
`container` is used to style the base element of the button for its various mouse states. <br />
`svg` is used to style an svg icon (the default inner element) inside the button. <br />
`text` is used to create and style a text icon inside the button.

#### Example

<ComponentContainer>
  <DeepChatBrowser
    style={{borderRadius: '8px'}}
    demo={true}
    images={{
      button: {
        styles: {
          container: {
            default: {backgroundColor: '#e6f0ff'},
            hover: {backgroundColor: '#dbe9ff'},
            click: {backgroundColor: '#c4dbff'},
          },
        },
        position: 'outside-left',
      },
    }}
  ></DeepChatBrowser>
</ComponentContainer>

<Tabs>
<TabItem value="js" label="Sample code">

```html
<deep-chat
  images='{
    "button": {
      "styles": {
        "container": {
          "default": {"backgroundColor": "#e6f0ff"},
          "hover": {"backgroundColor": "#dbe9ff"},
          "click": {"backgroundColor": "#c4dbff"}
        }
      },
      "position": "outside-left"
    }
  }'
></deep-chat>
```

</TabItem>
<TabItem value="py" label="Full code">

```html
<!-- This example is for Vanilla JS and should be tailored to your framework (see Examples) -->

<deep-chat
  images='{
    "button": {
      "styles": {
        "container": {
          "default": {"backgroundColor": "#e6f0ff"},
          "hover": {"backgroundColor": "#dbe9ff"},
          "click": {"backgroundColor": "#c4dbff"}
        }
      },
      "position": "outside-left"
    }
  }'
  style="border-radius: 8px"
  demo="true"
></deep-chat>
```

</TabItem>
</Tabs>

<LineBreak></LineBreak>

### `ButtonStyles` {#ButtonStyles}

- Type: \{<br />
  &nbsp;&nbsp;&nbsp;&nbsp; [`container?: StatefulStyles`](#StatefulStyles), <br />
  &nbsp;&nbsp;&nbsp;&nbsp; [`svg?: ButtonInnerStyles`](#ButtonInnerStyles), <br />
  &nbsp;&nbsp;&nbsp;&nbsp; [`text?: ButtonInnerStyles`](#ButtonInnerStyles) <br />
  \}

Styling for a button inside the chat view. <br />
`container` is used to style the base element of the button for its various mouse states. <br />
`svg` is used to style an svg icon (the default inner element) inside the button. <br />
`text` is used to create and style a text icon inside the button.

#### Example

<ComponentContainer>
  <DeepChatBrowser
    style={{borderRadius: '8px'}}
    textInput={{styles: {text: {paddingRight: '64px'}}}}
    submitButtonStyles={{
      submit: {
        container: {
          default: {backgroundColor: '#ddedff', width: '50px'},
          hover: {backgroundColor: '#c6e1ff'},
          click: {backgroundColor: '#acd3ff'},
        },
        text: {
          content: 'Send',
          styles: {default: {color: '#6c6c6c'}, hover: {color: '#2c2c2c'}},
        },
      },
      alwaysEnabled: true,
    }}
    demo={true}
    images={{
      button: {
        styles: {
          container: {
            default: {backgroundColor: 'unset', width: '1.4em', bottom: '0.75em'},
          },
          svg: {
            content: `<?xml version="1.0" ?> <svg viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg"> <g id="layer1"> <path d="M 10,2 C 4.5399633,2 0,5.5155856 0,10 a 0.50005,0.50005 0 0 0 0,0.002 c 0.00211683,0.498935 0.0623158,0.997281 0.1796875,1.486328 a 0.50005,0.50005 0 0 0 0.65625,0.353516 c 0.166982,-0.06005 0.3346003,-0.11455 0.5058594,-0.162109 3.2465843,-0.86948 6.3865589,0.651858 7.0898437,3.277343 0.1999132,0.753403 0.1847938,1.55275 -0.046875,2.341797 A 0.50005,0.50005 0 0 0 8.8144531,17.9375 C 9.2066201,17.97715 9.6008792,17.99763 9.9960938,18 A 0.50005,0.50005 0 0 0 10,18 C 15.460037,18 20,14.484414 20,10 20,5.5155856 15.460037,2 10,2 Z m 0,1 c 5.033373,0 9,3.2001431 9,7 0,3.798831 -3.964655,6.998273 -8.996094,7 C 9.7877816,16.9987 9.5727572,16.978264 9.3574219,16.964844 9.490202,16.205055 9.5915438,15.434329 9.3964844,14.699219 8.5282549,11.457966 4.7749194,9.7293469 1.0878906,10.714844 1.0549598,10.475808 1.0010202,10.238508 1,9.9980469 1.0013454,6.1990381 4.9674803,3 10,3 Z M 9.5,4 C 8.677494,4 8,4.677495 8,5.5 8,6.322505 8.677494,7 9.5,7 10.322505,7 11,6.322505 11,5.5 11,4.677495 10.322505,4 9.5,4 Z m -4,1 C 4.677495,5 4,5.677495 4,6.5 4,7.322505 4.677495,8 5.5,8 6.322505,8 7,7.322505 7,6.5 7,5.677495 6.322505,5 5.5,5 Z m 4,0 C 9.782065,5 10,5.217935 10,5.5 10,5.782065 9.782065,6 9.5,6 9.217935,6 9,5.782065 9,5.5 9,5.217935 9.217935,5 9.5,5 Z m 4,0 C 12.677494,5 12,5.677495 12,6.5 12,7.322505 12.677494,8 13.5,8 14.322505,8 15,7.322505 15,6.5 15,5.677495 14.322505,5 13.5,5 Z m -8,1 C 5.782065,6 6,6.217935 6,6.5 6,6.782065 5.782065,7 5.5,7 5.217935,7 5,6.782065 5,6.5 5,6.217935 5.217935,6 5.5,6 Z m 8,0 C 13.782065,6 14,6.217935 14,6.5 14,6.782065 13.782065,7 13.5,7 13.217935,7 13,6.782065 13,6.5 13,6.217935 13.217935,6 13.5,6 Z m 3,2 C 15.677494,8 15,8.677495 15,9.5 15,10.322505 15.677494,11 16.5,11 17.322505,11 18,10.322505 18,9.5 18,8.677495 17.322505,8 16.5,8 Z m 0,1 C 16.782065,9 17,9.217935 17,9.5 17,9.782065 16.782065,10 16.5,10 16.217935,10 16,9.782065 16,9.5 16,9.217935 16.217935,9 16.5,9 Z m -3,3 C 12.677494,12 12,12.677495 12,13.5 12,14.322505 12.677494,15 13.5,15 14.322505,15 15,14.322505 15,13.5 15,12.677495 14.322505,12 13.5,12 Z m 0,1 C 13.782065,13 14,13.217935 14,13.5 14,13.782065 13.782065,14 13.5,14 13.217935,14 13,13.782065 13,13.5 13,13.217935 13.217935,13 13.5,13 Z" style="fill:#222222; fill-opacity:1; stroke:none; stroke-width:0px;"/> </g> </svg>`,
            styles: {
              default: {
                filter:
                  'brightness(0) saturate(100%) invert(45%) sepia(20%) saturate(0%) hue-rotate(255deg) brightness(99%) contrast(101%)',
              },
              hover: {
                filter:
                  'brightness(0) saturate(100%) invert(61%) sepia(41%) saturate(5169%) hue-rotate(187deg) brightness(99%) contrast(105%)',
              },
              click: {
                filter:
                  'brightness(0) saturate(100%) invert(58%) sepia(68%) saturate(541%) hue-rotate(179deg) brightness(104%) contrast(100%)',
              },
            },
          },
        },
      },
    }}
  ></DeepChatBrowser>
</ComponentContainer>

<Tabs>
<TabItem value="js" label="Sample code">

```html
<deep-chat
  submitButtonStyles='{
    "submit": {
      "container": {
        "default": {"backgroundColor": "#ddedff", "width": "50px"},
        "hover": {"backgroundColor": "#c6e1ff"},
        "click": {"backgroundColor": "#acd3ff"}
      },
      "text": {
        "content": "Send",
        "styles": {"default": {"color": "#6c6c6c"}, "hover": {"color": "#2c2c2c"}}
      }
    }
  }'
  images='{
    "button": {
      "styles": {
        "container": {
          "default": {"backgroundColor": "unset", "width": "1.4em", "bottom": "0.75em"}
        },
        "svg": {
          "content": "<?xml version=\"1.0\" ?> <svg viewBox=\"0 0 20 20\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\"> <g id=\"layer1\"> <path d=\"M 10,2 C 4.5399633,2 0,5.5155856 0,10 a 0.50005,0.50005 0 0 0 0,0.002 c 0.00211683,0.498935 0.0623158,0.997281 0.1796875,1.486328 a 0.50005,0.50005 0 0 0 0.65625,0.353516 c 0.166982,-0.06005 0.3346003,-0.11455 0.5058594,-0.162109 3.2465843,-0.86948 6.3865589,0.651858 7.0898437,3.277343 0.1999132,0.753403 0.1847938,1.55275 -0.046875,2.341797 A 0.50005,0.50005 0 0 0 8.8144531,17.9375 C 9.2066201,17.97715 9.6008792,17.99763 9.9960938,18 A 0.50005,0.50005 0 0 0 10,18 C 15.460037,18 20,14.484414 20,10 20,5.5155856 15.460037,2 10,2 Z m 0,1 c 5.033373,0 9,3.2001431 9,7 0,3.798831 -3.964655,6.998273 -8.996094,7 C 9.7877816,16.9987 9.5727572,16.978264 9.3574219,16.964844 9.490202,16.205055 9.5915438,15.434329 9.3964844,14.699219 8.5282549,11.457966 4.7749194,9.7293469 1.0878906,10.714844 1.0549598,10.475808 1.0010202,10.238508 1,9.9980469 1.0013454,6.1990381 4.9674803,3 10,3 Z M 9.5,4 C 8.677494,4 8,4.677495 8,5.5 8,6.322505 8.677494,7 9.5,7 10.322505,7 11,6.322505 11,5.5 11,4.677495 10.322505,4 9.5,4 Z m -4,1 C 4.677495,5 4,5.677495 4,6.5 4,7.322505 4.677495,8 5.5,8 6.322505,8 7,7.322505 7,6.5 7,5.677495 6.322505,5 5.5,5 Z m 4,0 C 9.782065,5 10,5.217935 10,5.5 10,5.782065 9.782065,6 9.5,6 9.217935,6 9,5.782065 9,5.5 9,5.217935 9.217935,5 9.5,5 Z m 4,0 C 12.677494,5 12,5.677495 12,6.5 12,7.322505 12.677494,8 13.5,8 14.322505,8 15,7.322505 15,6.5 15,5.677495 14.322505,5 13.5,5 Z m -8,1 C 5.782065,6 6,6.217935 6,6.5 6,6.782065 5.782065,7 5.5,7 5.217935,7 5,6.782065 5,6.5 5,6.217935 5.217935,6 5.5,6 Z m 8,0 C 13.782065,6 14,6.217935 14,6.5 14,6.782065 13.782065,7 13.5,7 13.217935,7 13,6.782065 13,6.5 13,6.217935 13.217935,6 13.5,6 Z m 3,2 C 15.677494,8 15,8.677495 15,9.5 15,10.322505 15.677494,11 16.5,11 17.322505,11 18,10.322505 18,9.5 18,8.677495 17.322505,8 16.5,8 Z m 0,1 C 16.782065,9 17,9.217935 17,9.5 17,9.782065 16.782065,10 16.5,10 16.217935,10 16,9.782065 16,9.5 16,9.217935 16.217935,9 16.5,9 Z m -3,3 C 12.677494,12 12,12.677495 12,13.5 12,14.322505 12.677494,15 13.5,15 14.322505,15 15,14.322505 15,13.5 15,12.677495 14.322505,12 13.5,12 Z m 0,1 C 13.782065,13 14,13.217935 14,13.5 14,13.782065 13.782065,14 13.5,14 13.217935,14 13,13.782065 13,13.5 13,13.217935 13.217935,13 13.5,13 Z\" style=\"fill:#222222; fill-opacity:1; stroke:none; stroke-width:0px;\"/> </g> </svg>",
          "styles": {
            "default": {
              "filter":
                "brightness(0) saturate(100%) invert(45%) sepia(20%) saturate(0%) hue-rotate(255deg) brightness(99%) contrast(101%)"
            },
            "hover": {
              "filter":
                "brightness(0) saturate(100%) invert(61%) sepia(41%) saturate(5169%) hue-rotate(187deg) brightness(99%) contrast(105%)"
            },
            "click": {
              "filter":
                "brightness(0) saturate(100%) invert(58%) sepia(68%) saturate(541%) hue-rotate(179deg) brightness(104%) contrast(100%)"
            }
          }
        }
      }
    }
  }'
></deep-chat>
```

</TabItem>
<TabItem value="py" label="Full code">

```html
<!-- This example is for Vanilla JS and should be tailored to your framework (see Examples) -->

<deep-chat
  textInput='{"styles": {"text": {"paddingRight": "64px"}}}'
  style="border-radius: 8px"
  demo="true"
  submitButtonStyles='{
    "submit": {
      "container": {
        "default": {"backgroundColor": "#ddedff", "width": "50px"},
        "hover": {"backgroundColor": "#c6e1ff"},
        "click": {"backgroundColor": "#acd3ff"}
      },
      "text": {
        "content": "Send",
        "styles": {"default": {"color": "#6c6c6c"}, "hover": {"color": "#2c2c2c"}}
      }
    },
    "alwaysEnabled": true
  }'
  images='{
    "button": {
      "styles": {
        "container": {
          "default": {"backgroundColor": "unset", "width": "1.4em", "bottom": "0.75em"}
        },
        "svg": {
          "content": "<?xml version=\"1.0\" ?> <svg viewBox=\"0 0 20 20\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\"> <g id=\"layer1\"> <path d=\"M 10,2 C 4.5399633,2 0,5.5155856 0,10 a 0.50005,0.50005 0 0 0 0,0.002 c 0.00211683,0.498935 0.0623158,0.997281 0.1796875,1.486328 a 0.50005,0.50005 0 0 0 0.65625,0.353516 c 0.166982,-0.06005 0.3346003,-0.11455 0.5058594,-0.162109 3.2465843,-0.86948 6.3865589,0.651858 7.0898437,3.277343 0.1999132,0.753403 0.1847938,1.55275 -0.046875,2.341797 A 0.50005,0.50005 0 0 0 8.8144531,17.9375 C 9.2066201,17.97715 9.6008792,17.99763 9.9960938,18 A 0.50005,0.50005 0 0 0 10,18 C 15.460037,18 20,14.484414 20,10 20,5.5155856 15.460037,2 10,2 Z m 0,1 c 5.033373,0 9,3.2001431 9,7 0,3.798831 -3.964655,6.998273 -8.996094,7 C 9.7877816,16.9987 9.5727572,16.978264 9.3574219,16.964844 9.490202,16.205055 9.5915438,15.434329 9.3964844,14.699219 8.5282549,11.457966 4.7749194,9.7293469 1.0878906,10.714844 1.0549598,10.475808 1.0010202,10.238508 1,9.9980469 1.0013454,6.1990381 4.9674803,3 10,3 Z M 9.5,4 C 8.677494,4 8,4.677495 8,5.5 8,6.322505 8.677494,7 9.5,7 10.322505,7 11,6.322505 11,5.5 11,4.677495 10.322505,4 9.5,4 Z m -4,1 C 4.677495,5 4,5.677495 4,6.5 4,7.322505 4.677495,8 5.5,8 6.322505,8 7,7.322505 7,6.5 7,5.677495 6.322505,5 5.5,5 Z m 4,0 C 9.782065,5 10,5.217935 10,5.5 10,5.782065 9.782065,6 9.5,6 9.217935,6 9,5.782065 9,5.5 9,5.217935 9.217935,5 9.5,5 Z m 4,0 C 12.677494,5 12,5.677495 12,6.5 12,7.322505 12.677494,8 13.5,8 14.322505,8 15,7.322505 15,6.5 15,5.677495 14.322505,5 13.5,5 Z m -8,1 C 5.782065,6 6,6.217935 6,6.5 6,6.782065 5.782065,7 5.5,7 5.217935,7 5,6.782065 5,6.5 5,6.217935 5.217935,6 5.5,6 Z m 8,0 C 13.782065,6 14,6.217935 14,6.5 14,6.782065 13.782065,7 13.5,7 13.217935,7 13,6.782065 13,6.5 13,6.217935 13.217935,6 13.5,6 Z m 3,2 C 15.677494,8 15,8.677495 15,9.5 15,10.322505 15.677494,11 16.5,11 17.322505,11 18,10.322505 18,9.5 18,8.677495 17.322505,8 16.5,8 Z m 0,1 C 16.782065,9 17,9.217935 17,9.5 17,9.782065 16.782065,10 16.5,10 16.217935,10 16,9.782065 16,9.5 16,9.217935 16.217935,9 16.5,9 Z m -3,3 C 12.677494,12 12,12.677495 12,13.5 12,14.322505 12.677494,15 13.5,15 14.322505,15 15,14.322505 15,13.5 15,12.677495 14.322505,12 13.5,12 Z m 0,1 C 13.782065,13 14,13.217935 14,13.5 14,13.782065 13.782065,14 13.5,14 13.217935,14 13,13.782065 13,13.5 13,13.217935 13.217935,13 13.5,13 Z\" style=\"fill:#222222; fill-opacity:1; stroke:none; stroke-width:0px;\"/> </g> </svg>",
          "styles": {
            "default": {
              "filter":
                "brightness(0) saturate(100%) invert(45%) sepia(20%) saturate(0%) hue-rotate(255deg) brightness(99%) contrast(101%)"
            },
            "hover": {
              "filter":
                "brightness(0) saturate(100%) invert(61%) sepia(41%) saturate(5169%) hue-rotate(187deg) brightness(99%) contrast(105%)"
            },
            "click": {
              "filter":
                "brightness(0) saturate(100%) invert(58%) sepia(68%) saturate(541%) hue-rotate(179deg) brightness(104%) contrast(100%)"
            }
          }
        }
      }
    }
  }'
></deep-chat>
```

</TabItem>
</Tabs>

<LineBreak></LineBreak>

:::tip
You can use the [`CSSFilterConverter`](https://cssfilterconverter.com/) tool to generate filter values for the icon color.
:::

<LineBreak></LineBreak>

### `ButtonInnerStyles` {#ButtonInnerStyles}

- Type: \{<br />
  &nbsp;&nbsp;&nbsp;&nbsp; [`styles?: StatefulStyles`](#StatefulStyles), <br />
  &nbsp;&nbsp;&nbsp;&nbsp; `content?: string` <br />
  \}

Styling for an element inside a button container. <br />
`styles` is used to set the style of the element for its various mouse states. <br />
`content` is a string that is used to generate the inner element. When it is inside a [`text`](#ButtonStyles) property - the string generates the element text.
When inside an [`svg`](#ButtonStyles) property - the string needs to be a full inlined svg element HTML which will be used to generate the icon.

:::info
If the `content` string is used for an [`svg`](#ButtonStyles):

- It needs to contain a _xmlns="http://www.w3.org/2000/svg"_ attribute.
- If it is inside a HTML attribute (the parentmost object is inside quotes `"` - see the editable example) or when not using backticks (`` ` ``) - make sure to escape the quotes by changing
  `"` to `\"` (An easy way to do this is to stringify it using _JSON.stringify()_). Also when inside a HTML attribute, replace the first `<` character with `&lt`.

:::

<LineBreak></LineBreak>

### `ButtonPosition` {#ButtonPosition}

- Type: `"inside-left"` | `"inside-right"` | `"outside-left"` | `"outside-right"` | `"dropup-menu"`

Position for a button either _inside_ the [text input container](#textInput), _outside_ it (either _left_ or _right_) or inside the [`dropup menu`](#dropupStyles).

#### Example

<ComponentContainer>
  <DeepChatBrowser
    style={{borderRadius: '8px'}}
    demo={true}
    gifs={{button: {position: 'dropup-menu'}}}
    audio={{button: {position: 'dropup-menu'}}}
    camera={{button: {position: 'dropup-menu'}}}
    mixedFiles={{button: {position: 'inside-left'}}}
    microphone={{button: {position: 'outside-right'}}}
  ></DeepChatBrowser>
</ComponentContainer>

<Tabs>
<TabItem value="js" label="Sample code">

```html
<deep-chat
  gifs='{"button": {"position": "dropup-menu"}}'
  audio='{"button": {"position": "dropup-menu"}}'
  camera='{"button": {"position": "dropup-menu"}}'
  mixedFiles='{"button": {"position": "inside-left"}}'
  microphone='{"button": {"position": "outside-right"}}'
></deep-chat>
```

</TabItem>
<TabItem value="py" label="Full code">

```html
<!-- This example is for Vanilla JS and should be tailored to your framework (see Examples) -->

<deep-chat
  demo="true"
  style="border-radius: 8px"
  gifs='{"button": {"position": "dropup-menu"}}'
  audio='{"button": {"position": "dropup-menu"}}'
  camera='{"button": {"position": "dropup-menu"}}'
  mixedFiles='{"button": {"position": "inside-left"}}'
  microphone='{"button": {"position": "outside-right"}}'
></deep-chat>
```

</TabItem>
</Tabs>

<LineBreak></LineBreak>

### `MicrophoneStyles` {#MicrophoneStyles}

- Type: \{<br />
  &nbsp;&nbsp;&nbsp;&nbsp; [`default?: ButtonStyles`](#ButtonStyles), <br />
  &nbsp;&nbsp;&nbsp;&nbsp; [`active?: ButtonStyles`](#ButtonStyles), <br />
  &nbsp;&nbsp;&nbsp;&nbsp; [`unsupported?: ButtonStyles`](#ButtonStyles), <br />
  &nbsp;&nbsp;&nbsp;&nbsp; [`position?: ButtonPosition`](#ButtonPosition) <br />
  \}

Custom styling for the microphone button. <br />
`default` is used for the default button state. <br />
`active` is used when the microphone is active. <br />
`unsupported` is used when recording is not supported on the user's browser. <br />
`position` is the button position within the input area.

<ComponentContainer>
  <DeepChatBrowser
    style={{borderRadius: '8px'}}
    introMessage={{text: 'Use the microphone button to record audio.'}}
    demo={true}
    microphone={{
      button: {
        default: {
          container: {
            hover: {
              backgroundColor: '#7fbded69',
            },
            click: {
              backgroundColor: '#4babf669',
            },
          },
          svg: {
            styles: {
              default: {
                filter:
                  'brightness(0) saturate(100%) invert(49%) sepia(53%) saturate(6895%) hue-rotate(200deg) brightness(101%) contrast(101%)',
              },
              hover: {
                filter:
                  'brightness(0) saturate(100%) invert(27%) sepia(59%) saturate(5655%) hue-rotate(203deg) brightness(101%) contrast(84%)',
              },
            },
          },
        },
        active: {
          container: {
            hover: {
              backgroundColor: '#ffd07c70',
            },
            click: {
              backgroundColor: '#ecb85c70',
            },
          },
          svg: {
            styles: {
              default: {
                filter:
                  'brightness(0) saturate(100%) invert(49%) sepia(99%) saturate(477%) hue-rotate(343deg) brightness(100%) contrast(101%)',
              },
            },
          },
        },
      },
    }}
  ></DeepChatBrowser>
</ComponentContainer>

<Tabs>
<TabItem value="js" label="Sample code">

```html
<deep-chat
  microphone='{
    "button": {
      "default": {
        "container": {
          "hover": {"backgroundColor": "#7fbded69"},
          "click": {"backgroundColor": "#4babf669"}
        },
        "svg": {
          "styles": {
            "default": {
              "filter":
                "brightness(0) saturate(100%) invert(49%) sepia(53%) saturate(6895%) hue-rotate(200deg) brightness(101%) contrast(101%)"
            },
            "hover": {
              "filter":
                "brightness(0) saturate(100%) invert(27%) sepia(59%) saturate(5655%) hue-rotate(203deg) brightness(101%) contrast(84%)"
            }
          }
        }
      },
      "active": {
        "container": {
          "hover": {"backgroundColor": "#ffd07c70"},
          "click": {"backgroundColor": "#ecb85c70"}
        },
        "svg": {
          "styles": {
            "default": {
              "filter":
                "brightness(0) saturate(100%) invert(49%) sepia(99%) saturate(477%) hue-rotate(343deg) brightness(100%) contrast(101%)"
            }
          }
        }
      }
    }
  }'
></deep-chat>
```

</TabItem>
<TabItem value="py" label="Full code">

```html
<!-- This example is for Vanilla JS and should be tailored to your framework (see Examples) -->

<deep-chat
  microphone='{
    "button": {
      "default": {
        "container": {
          "hover": {"backgroundColor": "#7fbded69"},
          "click": {"backgroundColor": "#4babf669"}
        },
        "svg": {
          "styles": {
            "default": {
              "filter":
                "brightness(0) saturate(100%) invert(49%) sepia(53%) saturate(6895%) hue-rotate(200deg) brightness(101%) contrast(101%)"
            },
            "hover": {
              "filter":
                "brightness(0) saturate(100%) invert(27%) sepia(59%) saturate(5655%) hue-rotate(203deg) brightness(101%) contrast(84%)"
            }
          }
        }
      },
      "active": {
        "container": {
          "hover": {"backgroundColor": "#ffd07c70"},
          "click": {"backgroundColor": "#ecb85c70"}
        },
        "svg": {
          "styles": {
            "default": {
              "filter":
                "brightness(0) saturate(100%) invert(49%) sepia(99%) saturate(477%) hue-rotate(343deg) brightness(100%) contrast(101%)"
            }
          }
        }
      }
    }
  }'
  demo="true"
  style="border-radius: 8px"
  introMessage='{"text": "Use the microphone button to record audio."}'
></deep-chat>
```

</TabItem>
</Tabs>

<LineBreak></LineBreak>

:::tip
You can use the [`CSSFilterConverter`](https://cssfilterconverter.com/) tool to generate filter values for the icon color.
:::

<LineBreak></LineBreak>
